<template>
  <div class="report-form">
    <div class="report-form-content">
      <div class="report-form-content-title">
        <h1 style="font-weight: bold" v-if="oper === 'add'">新增合同模版</h1>
        <h1 style="font-weight: bold" v-if="oper === 'edit'">编辑合同模版</h1>
        <h1 style="font-weight: bold" v-if="oper === 'view'">查看合同模版</h1>
      </div>
      <el-form class="my-form" ref="objFormRef" :model="obj" :rules="rules"
               label-position="right" label-width="auto" label-suffix="："
               :disabled="oper === 'view'">
        <el-form-item label="合同模版编码" prop="code">
          <el-input v-model="obj.code" placeholder="合同模版编码" class="template" />
        </el-form-item>
        <el-form-item label="合同模版名称" prop="name">
          <el-input v-model="obj.name" placeholder="合同模版名称" class="template" />
        </el-form-item>
        <!--
        <el-form-item label="导入模版" prop="aaa">
          <div class="file-list-btns">
            <el-input v-model="obj.name1" placeholder="模板名称" class="template-name" disabled />
            <FileUpload :isShowTip="false" v-model="oFiles" :isShowFileList="false" @uploadedSuccess="uploadedSuccessFn" />
            <el-button type="primary" style="margin-left: 20px">解析模版</el-button>
          </div>
        </el-form-item>
        -->
        <el-form-item label="模版内容" prop="content">
          <editor v-model="obj.content" v-model:readOnly="readOnly" :height="800" />
        </el-form-item>
        <div style="text-align: center;">
          <div class="tabs-list">
            <el-button type="primary" @click="handleSave('obj')">
              <svg-icon icon-class="save" />
              保存
            </el-button>
          </div>
        </div>
      </el-form>
    </div>
  </div>
</template>
<script setup>
import {getCurrentInstance, ref} from 'vue'
import {doGet, doPost, doPut} from "@/config/http";
import {notifySuccess, alertErrorMsg, customValidator, svc, initListUpdate} from "@/config/common";
import SvgIcon from "@/components/SvgIcon/index.vue";
import {useRoute, useRouter} from "vue-router";
import {getPathByName} from "@/router";

const {proxy} = getCurrentInstance();
const route = useRoute();
const router = useRouter();

let obj = ref({
  code: null,
  name: null,
  content: '',
  attachmentId: null,
  remark: null,
  state: '1',
})

const objFormRef = ref(null)
const oper = ref(route.query.oper)
const id = ref(route.query.id)
const oFiles = ref([])
const readOnly = ref(oper.value === 'view')

const rules = {
  code: [{ required: false, validator: customValidator, min: 0, max: 20, label: '合同模版编码', trigger: ['blur', 'change'] }],
  name: [{ required: true, validator: customValidator, min: 1, max: 200, label: '合同模版名称', trigger: ['blur', 'change'] }],
  content: [{ required: true, validator: customValidator, min: 0, max: 0, label: '合同模版内容', trigger: ['blur', 'change'] }],
  attachmentId: [{ required: false, validator: customValidator, min: 0, max: 20, label: '合同模版导入附件ID', trigger: ['blur', 'change'] }],
  remark: [{ required: false, validator: customValidator, min: 0, max: 0, label: '备注', trigger: ['blur', 'change'] }],
  state: [{ required: true, validator: customValidator, min: 0, max: 20, label: '状态', trigger: ['blur', 'change'] }],
}

const uploadedSuccessFn = (file) => {
  console.debug('file-----------',file)
  oFiles.value.push(file)
}

async function initObj() {
  if (oper.value !== 'add' && id.value) {
    obj.value = await doGet(svc, `/contract-template/${id.value}`, {}, true)
  }
}

async function checkForm(callback) {
  let v = await objFormRef.value.validate().catch((err)=>{return err})
  if (v !== true) {
    alertErrorMsg("表单验证不通过，请检查")
    return
  }
  callback()
}

function handleSave() {
  checkForm(() => {
    switch (oper.value) {
      case "add":
        doPost(svc, '/contract-template/add', obj.value).then(() => {
          notifySuccess('新增成功')
          initListUpdate('contractTemplateList', '/contract-template/page')
          goTargetByName('contractTemplate', {}, true)
        })
        break;
      case "edit":
        doPut(svc, '/contract-template/modify', obj.value).then(() => {
          notifySuccess('修改成功')
          initListUpdate('contractTemplateList', '/contract-template/page')
          goTargetByName('contractTemplate', {}, true)  
        })
        break;
    }
  })
}

function goTargetByName(name, query, closeCurrent) {
  const path = getPathByName(name)
  if (closeCurrent) {
    proxy.$tab.closeOpenPage({path, query})
  } else {
    proxy.$tab.openPage({path, query})
  }
}

initObj()
</script>

<style scoped>
.report-form-content {
  padding: 20px;
}
.template {
  width: 300px !important;
}
</style>
